{extend name="../admin/common/base" /}
{block name="nav_title"}
<a href="javascript:;" onclick="editTab('0','')" class="layui-btn layui-btn-normal layui-btn-sm rha-nav-title">添加标签</a>
{/block}
{block name="body"}
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li><a href="{:url('friends/index')}">粉丝列表</a></li>
        <li class="layui-this"><a href="{:url('friends/tabList')}">标签管理</a></li>
    </ul>
    <div class="layui-tab-content"></div>
</div>

<div style="padding: 0px 10px 0px 10px;">
<table class="layui-table" lay-even="" lay-skin="nob">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>粉丝数</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {volist name="tab_list" id="vo"}
    <tr>
        <td>{$vo.id}</td>
        <td>{$vo.name}</td>
        <td>{$vo.count}</td>
        <td>
            <a class="rha-bt-a" onclick="editTab('{$vo.id}','{$vo.name}')" href="javascript:;">编辑</a>
            <a class="rha-bt-a" onclick="deleteTab('{$vo.id}')" href="javascript:;">删除</a>

        </td>
    </tr>
    {/volist}
    </tbody>
</table>
</div>
<script>
    function deleteTab(id) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('你确定需要删除吗？', {
                btn: ['是','不'] //按钮
            }, function(){
                $.post("{:url('deleteTab')}",{'id':id},function (res) {
                    if(res.errcode == -1){
                        layer.msg(res.errmsg);
                    }else{
                        window.location.reload();
                    }
                },'json')
            })
        });

    }

    function editTab(id,val) {
        layui.use('layer', function(){

            var layer = layui.layer;
            //eg2
            var str = ' <div class="layui-input-inline">' +
                ' <input name="tab-name"  autocomplete="off" class="layui-input" type="input" id="tab-name" value="'+val+'">' +
                '<div id="edit-error" style="color: red;"></div> '    +
                '</div>';

            var title = '新增标签';
            if(id>0){
                title = '修改标签';
            }
            layer.open({
                'title':title,
                content: str
                ,btn: ['确认', '取消']
                ,yes: function(index, layero){
                    var tab_name = $('#tab-name').val();
                    if(tab_name.length == 0){
                        $('#edit-error').text('请输入标签名称');
                        return;
                    }
                    var length = getByteLen(tab_name);
                    if(length > 12){
                        $('#edit-error').text('不得超过6个汉字或12个字符');
                        return;
                    }

                    $.post("{:url('editTab')}",{id:id,name:tab_name},function (res) {
                        if(res.errcode == -1){
                            layer.msg(res.errmsg);
                        }else{
                            window.location.reload();
                        }

                    },'json')
                }
                ,btn2: function(index, layero){
                    layer.close(index);


                    //return false 开启该代码可禁止点击该按钮关闭
                }
                ,cancel: function(){
                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });

        });

    }

    function getByteLen(val) {
        var len = 0;
        for (var i = 0; i < val.length; i++) {
            var a = val.charAt(i);
            if (a.match(/[^\x00-\xff]/ig) != null)
            {
                len += 2;
            }
            else
            {
                len += 1;
            }
        }
        return len;
    }

</script>
{/block}